<template>
    <div class="newsinfo_main">
        <!--详情内容-->
        <div class="newsinfo_detail">
            <h3>{{NewsInfo.title}}</h3>
            <p class="newsinfo_count">
                <span>发表时间: {{NewsInfo.add_time}}</span>
                <span>{{NewsInfo.click}} 次浏览</span>
            </p>
            <p class="newsinfo_content" v-html="NewsInfo.content"></p>
        </div>

        <!--评论区域-->
        <div>
            <comment :id="id"></comment>
        </div>
    </div>
</template>

<script>

  import axios from 'axios'
  import {Toast} from 'mint-ui'
  import comment from '../common/Comment'

  export default {
    name: "NewsInfo",
    data() {
      return {
        id: this.$route.params.newsId,  //将URL传递过来的id值,挂载到 data 上
        NewsInfo: []
      }
    },
    components: {
      comment
    },
    created() {
      this.getNewsInfo();
    },
    methods: {
      getNewsInfo() {
        axios.get('http://wxtest.centaline.com.cn/api/api?type=getnew&newid=' + this.id)
          .then(res => {
            if (res.data.status === 0) {
              this.NewsInfo = res.data.message
            } else {
              Toast('请求数据失败,重新连接!!')
            }
          })

      }
    }
  }
</script>

<style scoped>
    .newsinfo_main {
        background-color: #fff;
        padding: 12px 6px;
    }
    /*详情内容*/
    .newsinfo_main .newsinfo_detail h3 {
        font-size: 20px;
        color: #f00;
    }
    .newsinfo_detail .newsinfo_count {
        display: flex;
        justify-content: space-between;
        color: #226aff;
    }

    .newsinfo_main .newsinfo_content {
        font-size: 14px;
    }
</style>